{template 'header'}
<style>
.intro{
	width: 96%;
    margin: 15px 2%;
    line-height: 24px;
}
@-webkit-keyframes read-page-schedule {
    0% {
        -webkit-transform:translateX(0);
        -ms-transform:translateX(0);
        transform:translateX(0);
    }
    50% {
        -webkit-transform:translateX(-40px);
        -ms-transform:translateX(-40px);
        transform:translateX(-40px);
    }
    100% {
        -webkit-transform:translateX(0px);
        -ms-transform:translateX(0px);
        transform:translateX(0px);
    }
}
@keyframes read-page-schedule {
    0% {
        -webkit-transform:translateX(0);
        -ms-transform:translateX(0);
        transform:translateX(0);
    }
    50% {
        -webkit-transform:translateX(-40px);
        -ms-transform:translateX(-40px);
        transform:translateX(-40px);
    }
    100% {
        -webkit-transform:translateX(0px);
        -ms-transform:translateX(0px);
        transform:translateX(0px);
    }
}
@-webkit-keyframes read-page-cannot-schedule {
    0% {
        -webkit-transform:translateX(0);
        -ms-transform:translateX(0);
        transform:translateX(0);
    }
    50% {
        -webkit-transform:translateX(-30px);
        -ms-transform:translateX(-30px);
        transform:translateX(-30px);
    }
    100% {
        -webkit-transform:translateX(0px);
        -ms-transform:translateX(0px);
        transform:translateX(0px);
    }
}
@keyframes read-page-cannot-schedule {
    0% {
        -webkit-transform:translateX(0);
        -ms-transform:translateX(0);
        transform:translateX(0);
    }
    50% {
        -webkit-transform:translateX(-30px);
        -ms-transform:translateX(-30px);
        transform:translateX(-30px);
    }
    100% {
        -webkit-transform:translateX(0px);
        -ms-transform:translateX(0px);
        transform:translateX(0px);
    }
}
.schedule {
    z-index:1;
}
.schedule .schedule-bar {
    position:fixed;
    background:#ff000d;
    color:#fff;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    font-size:12px;
    height:32px;
    padding-left:10px;
    border-top-left-radius:16px;
    border-bottom-left-radius:16px;
    box-shadow:1px 2px 17px 0px rgba(255, 0, 22, 0.2);
    right:-47px;
    z-index:1;
    width:135px;
    -webkit-animation:read-page-schedule 1s 1s 1;
    animation:read-page-schedule 1s 1s 1;
    -webkit-transition:all 1s;
    transition:all 1s;
}
.schedule .schedule-bar.cannot-schedule {
    -webkit-animation:read-page-cannot-schedule 1s 1s 1;
    animation:read-page-cannot-schedule 1s 1s 1;
    right:-40px;
    width:165px;
}
.schedule .schedule-bar.can-schedule::after {
    content:'';
    position:absolute;
    width:4px;
    height:4px;
    background:#fff;
    left:77px;
    top:10px;
    border-radius:100%;
}
.poster-bg{
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,.5);
    display: none;
}
.poster-bg #bremark-img{
	width:80%;
	height:auto;
	width: 80%;
    height: auto;
    margin: 0 10%;
    margin-top: 50px;
}
.poster-bg .close-img{
	width: 6%;
    height: auto;
    bottom: 50px;
    position: fixed;
    margin-left: 47%;
}

</style>
{if $poster['switch']==1}
<div class="schedule g-fixed g-img-full"><a onclick="createPoster()" class="schedule-bar can-schedule g-flex col-center" style="z-index: 1; top: 85;">推广海报</a>
</div>
{/if}
	<div class="intro">
	{$cfg['commission']['intro']}
	</div>

		</div>
	</div>
<div class="poster-bg">
	<img id="bremark-img" />
	<img onclick="hidePotser()" src="{RES}img/close.png" class="close-img">
</div>
<canvas id="myCanvas" width="640" height="1008" style="display:none;"></canvas>
{template 'loading'}
<script>
var nickname = '{$mem["nickname"]}';
var poster = '{php echo json_encode($poster)}';
poster = JSON.parse(poster);
function createPoster(){
	LOADING(true);
	sysPoster = poster.data;
	var avatar_pic = new Image();
	avatar_pic.src = '{$mem["avatar"]}';
	avatar_pic.onload = function(e) {
		var qr_pic = new Image();
		qr_pic.src = '{$qrurl}';
		qr_pic.onload = function(e) {
			var canvas = document.getElementById("myCanvas");
			var cxt = canvas.getContext("2d");
			
			var bg_pic = new Image();
			bg_pic.src = poster.bg;
			bg_pic.onload = function(e) {
				cxt.drawImage(bg_pic, 0, 0, 640, 1008);
				for(var ii in sysPoster){
					var pData = sysPoster[ii];
					pData.left = pData.left.replace('px', '');
			  		pData.top = pData.top.replace('px', '');
			      	pData.width = pData.width.replace('px', '');
			      	pData.height = pData.height.replace('px', '');
			      	pData.left = parseFloat(pData.left) * 2;
			      	pData.top = parseFloat(pData.top) * 2;
			      	pData.width = parseFloat(pData.width) * 2;
			      	pData.height = parseFloat(pData.height) * 2;
			      	if(pData.size) {
			      		pData.size = pData.size.replace('px', '');
			      		pData.size = parseFloat(pData.size) * 2;
			      	}
			      	if(pData.type=='img'){
						cxt.drawImage(avatar_pic, pData.left, pData.top, pData.width, pData.height);
					}
					else if(pData.type=='qr'){
						cxt.drawImage(qr_pic, pData.left, pData.top, pData.width, pData.height);
					}
					else if(pData.type=='name'){
						cxt.fillStyle = pData.color; //设置描边样式
					    cxt.font = pData.size+"px Arial"; //设置字体大小和字体
					    var trueTop = 0;
					    trueTop = parseFloat(pData.top) + parseInt(pData.size);
					    cxt.fillText(nickname, pData.left, trueTop);
					}
				}
				var u = navigator.userAgent, app = navigator.appVersion;
		    	var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
		    	var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
		    	if(isIOS){
		    		var src = canvas.toDataURL().replace("data:image/png;base64,","");
		    	}
		    	isAndroid = true;
		    	if(isAndroid){
		    		var src = canvas.toDataURL("image/png");
		    	}
		    	LOADING(false);
		    	$('#bremark-img').attr('src', src);
		    	$('#bremark-img').parent('div').show();
			}
		}
	}
}
function hidePotser(){
	$('.poster-bg').hide();
}
</script>
</body>
</html>